<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机械臂控制系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/events-styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="logo-text">机械臂控制系统</div>
            </div>
            <div class="status-bar">
                <div class="status-item">
                    <div class="status-dot active"></div>
                    <span>ROS连接正常</span>
                </div>
                <div class="status-item">
                    <div class="status-dot active"></div>
                    <span>机械臂就绪</span>
                </div>
                <div class="status-item">
                    <div class="status-dot active"></div>
                    <span>视觉系统在线</span>
                </div>
                <div class="status-item">
                    <div class="status-dot active"></div>
                    <span>数据接收中</span>
                </div>
            </div>
        </header>

        <!-- 左侧区域 -->
        <div class="left-panel">
            <!-- 控制面板 - 选项卡形式 -->
            <div class="control-card">
                <div class="card-header">
                    <h2 class="card-title">
                        <i class="fas fa-sliders-h"></i> 机械臂控制面板
                    </h2>
                </div>

                <!-- 选项卡导航 -->
                <div class="control-tabs">
                    <button class="control-tab active" data-tab="node">节点控制</button>
                    <button class="control-tab" data-tab="cable">索驱控制</button>
                    <button class="control-tab" data-tab="arm">机械臂控制</button>
                </div>

                <!-- 选项卡内容 -->
                <div class="control-tab-content active" id="tab-node">
                    <div class="control-panel">
                        <button class="control-btn" onclick="controlRosNode(1)">
                            <i class="fas fa-play"></i>
                            <span class="btn-text">启动所有节点</span>
                        </button>
                        <button class="control-btn" onclick="controlRosNode(2)">
                            <i class="fas fa-sync-alt"></i>
                            <span class="btn-text">重启所有节点</span>
                        </button>

                        <button class="control-btn" onclick="controlRosNode(3)">
                            <i class="fas fa-stop"></i>
                            <span class="btn-text">关闭所有节点</span>
                        </button>
                    </div>
                </div>

                <div class="control-tab-content" id="tab-cable">
                    <div class="control-panel">
                        <button class="control-btn" onclick="cabinProcess()">
                            <i class="fas fa-link"></i>
                            <span class="btn-text">全局绑扎</span>
                        </button>
                        <button class="control-btn" onclick="cabinEmergency(2)">
                            <i class="fas fa-pause"></i>
                            <span class="btn-text">暂停</span>
                        </button>
                        <button class="control-btn emergency-stop" onclick="cabinEmergency(1)">
                            <i class="fas fa-stop"></i>
                            <span class="btn-text">紧急停止</span>
                        </button>
                        <button class="control-btn" onclick="cabinEmergency(3)">
                            <i class="fas fa-play"></i>
                            <span class="btn-text">恢复</span>
                        </button>
                        <button class="control-btn" onclick="openCameraParams()">
                            <i class="fas fa-camera"></i>
                            <span class="btn-text">相机参数</span>
                        </button>
                        <button class="control-btn" onclick="openCableParams()">
                            <i class="fas fa-wind"></i>
                            <span class="btn-text">索驱参数</span>
                        </button>
                    </div>
                    <div class="options-group-title">
                        <i class="fas fa-cog"></i>绑扎模式
                    </div>
                    <div class="radio-group">
                        <label class="radio-label">
                            <span class="radio-option">
                                <input type="radio" name="tieMode" value="0" checked>
                                <span class="radio-custom"></span>
                            </span>
                            <span class="radio-text">全绑</span>
                        </label>
                        <label class="radio-label">
                            <span class="radio-option">
                                <input type="radio" name="tieMode" value="1">
                                <span class="radio-custom"></span>
                            </span>
                            <span class="radio-text">单数绑</span>
                        </label>
                        <label class="radio-label">
                            <span class="radio-option">
                                <input type="radio" name="tieMode" value="2">
                                <span class="radio-custom"></span>
                            </span>
                            <span class="radio-text">双数绑</span>
                        </label>
                    </div>
                </div>

                <div class="control-tab-content" id="tab-arm">
                    <div class="control-panel">
                        <button class="control-btn" onclick="armProcess()">
                            <i class="fas fa-asterisk"></i>
                            <span class="btn-text">单点绑扎</span>
                        </button>
                        <button class="control-btn" onclick="armEmergency(2)">
                            <i class="fas fa-pause-circle"></i>
                            <span class="btn-text">机械臂暂停</span>
                        </button>
                        <button class="control-btn" onclick="armEmergency(3)">
                            <i class="fas fa-play-circle"></i>
                            <span class="btn-text">机械臂恢复</span>
                        </button>
                        <button class="control-btn" onclick="armClearError()">
                            <i class="fas fa-redo-alt"></i>
                            <span class="btn-text">机械臂错误清除</span>
                        </button>
                        <button class="control-btn" onclick="armGoHome()">
                            <i class="fas fa-home"></i>
                            <span class="btn-text">机械臂回原点</span>
                        </button>
                        <button class="control-btn" onclick="openArmParams()">
                            <i class="fas fa-robot"></i>
                            <span class="btn-text">机械臂参数</span>
                        </button>
                    </div>
                    <div class="options-group-title">
                        <i class="fas fa-toggle-on"></i>工作模式
                    </div>
                    <div class="checkbox-group">
                        <label class="switch-label">
                            <span class="switch-text">是否绑扎</span>
                            <label class="switch">
                                <input type="checkbox" id="armTieCheck">
                                <span class="slider"></span>
                            </label>
                        </label>
                        <label class="switch-label">
                            <span class="switch-text">是否下潜</span>
                            <label class="switch">
                                <input type="checkbox" id="armDiveCheck" checked>
                                <span class="slider"></span>
                            </label>
                        </label>
                    </div>
                </div>
            </div>

            <!-- 日志系统 -->
            <div class="log-wrapper">
                <div class="log-panel">
                    <div class="log-panel-header">
                        <h2 class="log-panel-title">
                            <i class="fas fa-file-alt"></i> 系统日志
                        </h2>
                        <div class="log-panel-actions">
                            <button class="log-panel-btn" onclick="clearLogs()">
                                <i class="fas fa-trash"></i> 清除
                            </button>
                            <button class="log-panel-btn" onclick="exportLogs()">
                                <i class="fas fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="log-container" id="log-container">
                        <!-- 日志将通过JS动态添加 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧区域 - 嵌套选项卡 -->
        <div class="right-panel">
            <!-- 一级选项卡 -->
            <div class="main-tabs">
                <button class="main-tab active" onclick="switchMainTab('realtime')">数据展示</button>
                <button class="main-tab" onclick="switchMainTab('images')">图像监控</button>
                <button class="main-tab" onclick="switchMainTab('events')">事件记录</button>
            </div>

            <!-- 二级选项卡 - 数据展示 -->
            <div class="sub-tabs" id="sub-tabs-realtime">
                <button class="sub-tab active" onclick="switchSubTab('realtime', 'status')">状态数据</button>
                <button class="sub-tab" onclick="switchSubTab('realtime', 'position')">关节数据</button>
            </div>

            <!-- 二级选项卡 - 图像监控 -->
            <div class="sub-tabs" id="sub-tabs-images" style="display: none;">
                <button class="sub-tab" onclick="switchSubTab('images', 'comparison')">图像对比</button>
            </div>

            <!-- 二级选项卡 - 事件记录 -->
            <div class="sub-tabs" id="sub-tabs-events" style="display: none;">
                <button class="sub-tab active" onclick="switchSubTab('events', 'all')">全部事件</button>
                <button class="sub-tab" onclick="switchSubTab('events', 'move')">移动事件</button>
                <button class="sub-tab" onclick="switchSubTab('events', 'detection')">检测事件</button>
                <button class="sub-tab" onclick="switchSubTab('events', 'error')">错误事件</button>
            </div>

            <!-- 内容区域 -->
            <div class="tab-content active" id="content-realtime-status">
                <div class="data-display">
                    <!-- 整合：标题 + 统计卡片 + 搜索筛选 到同一行 -->
                    <div class="top-bar"
                        style="display: flex; flex-wrap: wrap; align-items: center; gap: 15px; padding: 15px 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);">
                        <!-- 1. 点位展示标题 -->
                        <div class="data-title"
                            style="font-size: 18px; font-weight: 600; color: var(--accent-blue); min-width: 120px;">
                            点位展示
                        </div>
                        <!-- 2. 搜索与筛选控件：放在最右侧，自适应宽度 -->
                        <div class="filter-group"
                            style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap; min-width: 400px;">
                            <input type="text" class="search-box" placeholder="搜索点位ID或坐标..."
                                style="padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; background: var(--bg-primary); color: var(--text-primary); flex: 1; min-width: 180px; outline: none; transition: border-color 0.3s ease;">
                            <select class="filter-select" id="type-filter"
                                style="padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; background: var(--bg-primary); color: var(--text-primary); outline: none; transition: border-color 0.3s ease; min-width: 100px;">
                                <option value="all">所有类型</option>
                                <option value="rebar">钢筋</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <!-- 3. 统计卡片组：放在标题右侧，自适应宽度 -->
                        <div class="stats-group"
                            style="display: flex; gap: 12px; flex-wrap: wrap; flex: 1; min-width: 300px;">
                            <!-- 已识别点数 -->
                            <div class="stat-card"
                                style="background: rgba(30,41,59,0.6); padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border-color);">
                                <div style="font-size: 12px; color: var(--text-muted);">已识别点数</div>
                                <div style="font-size: 16px; font-weight: 600; color: var(--accent-blue);"
                                    id="total-points">0</div>
                            </div>
                            <!-- 移动成功点数 -->
                            <div class="stat-card"
                                style="background: rgba(30,41,59,0.6); padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border-color);">
                                <div style="font-size: 12px; color: var(--text-muted);">移动成功</div>
                                <div style="font-size: 16px; font-weight: 600; color: var(--accent-green);"
                                    id="success-points">0</div>
                            </div>
                            <!-- 移动失败点数 -->
                            <div class="stat-card"
                                style="background: rgba(30,41,59,0.6); padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border-color);">
                                <div style="font-size: 12px; color: var(--text-muted);">移动失败</div>
                                <div style="font-size: 16px; font-weight: 600; color: var(--accent-red);"
                                    id="failed-points">0</div>
                            </div>
                            <!-- 未移动点数 -->
                            <div class="stat-card"
                                style="background: rgba(30,41,59,0.6); padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border-color);">
                                <div style="font-size: 12px; color: var(--text-muted);">未移动</div>
                                <div style="font-size: 16px; font-weight: 600; color: var(--accent-orange);"
                                    id="pending-points">0</div>
                            </div>
                        </div>
                    </div>
                    <!-- 表格容器：提高最大高度，充分利用页面空间 -->
                    <div class="point-table-container"
                        style="max-height: calc(100vh - 380px); /* 基于页面高度动态计算，适配不同屏幕 */ overflow-y: auto; border-radius: 0 0 12px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
                        <table class="point-data-table"
                            style="width: 100%; border-collapse: separate; border-spacing: 0;">
                            <thead>
                                <tr>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; border-right: 1px solid rgba(71,85,101,0.3); width: 10%;">
                                        点位ID</th>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; border-right: 1px solid rgba(71,85,101,0.3); width: 15%;">
                                        像素坐标</th>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; border-right: 1px solid rgba(71,85,101,0.3); width: 20%;">
                                        世界坐标 (m)</th>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; border-right: 1px solid rgba(71,85,101,0.3); width: 10%;">
                                        角度 (°)</th>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; border-right: 1px solid rgba(71,85,101,0.3); width: 10%;">
                                        类型</th>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; border-right: 1px solid rgba(71,85,101,0.3); width: 10%;">
                                        是否可用</th>
                                    <th
                                        style="padding: 14px 12px; text-align: center; background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 2; width: 10%;">
                                        移动状态</th>
                                </tr>
                            </thead>
                            <tbody id="point-data-body">
                                <tr>
                                    <td colspan="7" style="padding: 30px; text-align: center; color: var(--text-muted); font-size:
                                        14px;
                                        background: rgba(30,41,59,0.2);">
                                        <i class="fas fa-spinner fa-spin"
                                            style="margin-right: 8px; color: var(--accent-blue);"></i>
                                        等待点位数据接收...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 修改 content-realtime-position 的内容 -->
            <div class="tab-content" id="content-realtime-position">
                <div class="data-display">
                    <div class="data-header">
                        <div class="data-title">位置数据</div>
                    </div>

                    <!-- 实时姿态显示卡片 -->
                    <div class="pose-display"
                        style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        <div class="pose-card"
                            style="background: rgba(30,41,59,0.3); padding: 15px; border-radius: 8px;">
                            <h4
                                style="color: var(--accent-blue); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
                                <i class="fas fa-arrows-alt"></i> 位置 (m)
                            </h4>
                            <div class="pose-values">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                    <span style="color: var(--text-secondary);">末端X:</span>
                                    <span id="current-pose-x"
                                        style="font-weight: 600; color: var(--accent-green);">0.000</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                    <span style="color: var(--text-secondary);">末端Y:</span>
                                    <span id="current-pose-y"
                                        style="font-weight: 600; color: var(--accent-green);">0.000</span>
                                </div>
                                <div style="display: flex; justify-content: space-between;">
                                    <span style="color: var(--text-secondary);">末端Z:</span>
                                    <span id="current-pose-z"
                                        style="font-weight: 600; color: var(--accent-green);">0.000</span>
                                </div>
                            </div>
                        </div>
                        <div class="pose-card"
                            style="background: rgba(30,41,59,0.3); padding: 15px; border-radius: 8px;">
                            <h4
                                style="color: var(--accent-blue); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
                                <i class="fas fa-sync-alt"></i> 姿态 (弧度)
                            </h4>
                            <div class="pose-values">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                    <span style="color: var(--text-secondary);">x:</span>
                                    <span id="current-pose-rx"
                                        style="font-weight: 600; color: var(--accent-orange);">0.00</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                    <span style="color: var(--text-secondary);">y:</span>
                                    <span id="current-pose-ry"
                                        style="font-weight: 600; color: var(--accent-orange);">0.00</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                    <span style="color: var(--text-secondary);">z:</span>
                                    <span id="current-pose-rz"
                                        style="font-weight: 600; color: var(--accent-orange);">0.00</span>
                                </div>
                                <div style="display: flex; justify-content: space-between;">
                                    <span style="color: var(--text-secondary);">w:</span>
                                    <span id="current-pose-rw"
                                        style="font-weight: 600; color: var(--accent-orange);">0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="data-header">
                        <div class="data-title">关节数据</div>
                    </div>
                    <div class="data-content">
                        <table class="data-table" id="joints-data-table">
                            <thead>
                                <tr>
                                    <th>关节</th>
                                    <th>弧度 (rad)</th>
                                    <th>速度 (rad/s)</th>
                                    <th>电压 (V)</th>
                                    <th>电流 (A)</th>
                                    <th>温度 (°C)</th>
                                    <th>是否掉能</th>
                                </tr>
                            </thead>
                            <tbody id="joints-tbody">
                                <!-- 关节数据将通过JS动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <!-- 图像监控内容 -->
            <div class="tab-content" id="content-images-comparison">
                <div class="image-section">
                    <div class="image-comparison-container" id="comparison-container">
                        <div class="comparison-inner" id="comparison-inner">
                            <!-- 左侧图像 -->
                            <div class="comparison-image left-image" id="comparison-image-1">
                                <div class="image-title">相机图像</div>
                                <div class="image-placeholder" id="placeholder-comparison-1">
                                    <i class="fas fa-camera"></i>
                                    <p>等待图像数据...</p>
                                </div>
                                <img id="comparison-img-1" class="ros-image" style="display: none;">
                                <div class="detection-overlay" id="comparison-detection-1">
                                    <!-- 检测框将通过JS动态添加 -->
                                </div>
                            </div>

                            <!-- 右侧图像 -->
                            <div class="comparison-image right-image" id="comparison-image-2">
                                <div class="image-title">识别时刻图像</div>
                                <div class="image-placeholder" id="placeholder-comparison-2">
                                    <i class="fas fa-camera"></i>
                                    <p>等待图像数据...</p>
                                </div>
                                <img id="comparison-img-2" class="ros-image" style="display: none;">
                                <div class="detection-overlay" id="comparison-detection-2">
                                    <!-- 检测框将通过JS动态添加 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 事件记录内容 -->
            <div class="tab-content" id="content-events-all">
                <div class="events-content">
                    <div class="data-header">
                        <div class="data-title">全部事件记录</div>
                        <div class="data-actions">
                            <button class="data-action-btn" onclick="clearEvents()">
                                <i class="fas fa-trash"></i> 清除
                            </button>
                            <button class="data-action-btn" onclick="exportEvents()">
                                <i class="fas fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="events-list" id="events-container-all">
                        <!-- 事件数据将通过JS动态填充 -->
                    </div>
                </div>
            </div>

            <div class="tab-content" id="content-events-move">
                <div class="events-content">
                    <div class="data-header">
                        <div class="data-title">移动事件记录</div>
                        <div class="data-actions">
                            <button class="data-action-btn" onclick="clearMoveEvents()">
                                <i class="fas fa-trash"></i> 清除
                            </button>
                            <button class="data-action-btn" onclick="exportMoveEvents()">
                                <i class="fas fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="events-list" id="events-container-move">
                        <!-- 移动事件数据将通过JS动态填充 -->
                    </div>
                </div>
            </div>

            <div class="tab-content" id="content-events-detection">
                <div class="events-content">
                    <div class="data-header">
                        <div class="data-title">检测事件记录</div>
                        <div class="data-actions">
                            <button class="data-action-btn" onclick="clearDetectionEvents()">
                                <i class="fas fa-trash"></i> 清除
                            </button>
                            <button class="data-action-btn" onclick="exportDetectionEvents()">
                                <i class="fas fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="events-list" id="events-container-detection">
                        <!-- 检测事件数据将通过JS动态填充 -->
                    </div>
                </div>
            </div>

            <div class="tab-content" id="content-events-error">
                <div class="events-content">
                    <div class="data-header">
                        <div class="data-title">错误事件记录</div>
                        <div class="data-actions">
                            <button class="data-action-btn" onclick="clearErrorEvents()">
                                <i class="fas fa-trash"></i> 清除
                            </button>
                            <button class="data-action-btn" onclick="exportErrorEvents()">
                                <i class="fas fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="events-list" id="events-container-error">
                        <!-- 错误事件数据将通过JS动态填充 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态窗口容器 -->
    <div id="modal-container"></div>
    <script src="{{ url_for('static', filename='js/events-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>

</html>